import React, {Component} from 'react';
import PropTypes from "prop-types";
import {nanoid} from "nanoid";
import "./index.css"

class Header extends Component {
    // 对接收的props 进行:类型、必要性的限制
    static propTypes={
        addTask:PropTypes.func.isRequired
    }
    handleKeyUp = (event) => {
        const {addTask} = this.props;
        const {keyCode, target} = event;
        if (keyCode !== 13) return;
        if (target.value.trim() === '') {
            alert('输入不能为空')
            return
        }
        ;
        // 获取用户输入
        const taskName = target.value;
        // 通知App组件将任务添加到列表
        addTask({id: nanoid(), name: taskName, completed: false});
        // 清空输入
        target.value = '';

    }

    render() {
        return (
            <div className="todo-header">
                <input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
            </div>
        );
    }
}


export default Header;